<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <div class="detail-main">
    <div class="detail-main-head">
      <v-like class="like" :liked="liked" :number="number" waring @click="likedfn" />
      <div class="detail-main-head-content">
        <h6
          class="title"
          title="最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线"
        >
          最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线
        </h6>
        <div class="m-title">
          <span>mp.weixin.qq.com</span>
          <span>
            <v-icon type="star" theme="default" />同站内容
          </span>
        </div>
        <div class="share">
          <img src="~assets/images/avatar.png" />
          <span>分享者：小红帽</span>
          <i>2020/04/15 19:37:01</i>
        </div>
      </div>
    </div>
    <div class="detail-main-content">
      <div class="merger-list">
        <div class="merger-item">
          <a-tooltip>
            <template slot="title">
              Tooltip will show when mouse enter.
            </template>
            <v-icon class="merge-icon" type="merge" />
          </a-tooltip>
          <div class="merger-content">
            <h6>最前线丨顺丰推出外卖配送平台“丰食”：避开佣金争议，商家免费上线</h6>
            <div class="m-title">
              <v-tags class="tags-wrap" :data-source="tags" />
              <span>mp.weixin.qq.com</span>
              <span>
                <v-icon type="star" theme="default" />同站内容
              </span>
            </div>
            <div class="share">
              <img src="~assets/images/avatar.png">
              <span>分享者：小红帽</span>
              <i>2020/04/15 19:37:01</i>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-markdown">
        <div class="activity">
          <img class="activity-img" src="~assets/images/default.png" />
          <img class="activity-play" src="~assets/images/activity/play.png" />
          <img class="activity-status" src="~assets/images/activity/ing.png" />
        </div>
        <div class="activity">
          <img class="activity-img" src="~assets/images/default.png" />
          <img class="activity-play" src="~assets/images/activity/play.png" />
          <img class="activity-status" src="~assets/images/activity/end.png" />
        </div>
        <div class="activity">
          <img class="activity-img" src="~assets/images/default.png" />
          <img class="activity-play" src="~assets/images/activity/play.png" />
          <img class="activity-status" src="~assets/images/activity/live.png" />
        </div>
        <img src="~assets/images/default.png" />
        <div class="detail-main-content-text">
          阿萨大大
        </div>
      </div>
    </div>
    <div class="detail-main-foot">
      <v-tags class="tags-wrap" :data-source="tags" />
      <div class="post-foot">
        <div class="post-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="message" />评论1314
          </nuxt-link>
        </div>
        <div class="post-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="collect" />已收藏
          </nuxt-link>
        </div>
        <div class="post-action">
          <a-popover trigger="click" placement="bottom" overlay-class-name="popover">
            <a href="javascript:;" class="link-secondary">
              <v-icon type="safe" />举报
            </a>
            <template slot="content">
              <v-todos
                :data-source="[
                  { id: '/?1', name: '八卦帖子' },
                  { id: '/?2', name: '已发布的' },
                  { id: '/?3', name: '垃圾帖子' },
                  { id: '/?4', name: '失效链接' },
                  { id: '/?5', name: '取消' },
                ]"
                class="context-menus"
                @click="onClickPopMenu"
              />
            </template>
          </a-popover>
        </div>

        <div class="post-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="pencil" />建议
          </nuxt-link>
        </div>

        <div class="post-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="write" />编辑
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '~/components/icon'
import Like from '~/components/like'
import Tags from '~/components/tags'
import Todos from '~/components/todos'
export default {
  components: {
    'v-icon': Icon,
    'v-like': Like,
    'v-tags': Tags,
    'v-todos': Todos
  },
  data () {
    return {
      liked: false,
      number: 10,
      tags: ['智源动态', '媒体报道', '报告会']
    }
  },
  created () {
    // console.log(this.$store.state)
  },
  methods: {
    likedfn () {
      this.number++
      this.liked = true
    },
    onClickPopMenu (data) {
      console.log(data)
    },
  }
}
</script>
